<template>
  <el-dialog title="参会人员" v-model="d.isVisible" :before-close="close">
    <pagination-table ref="ptable" :tableData="d.listData">
      <XMTableColumn label="姓名" width="100" prop="user_name"></XMTableColumn>
      <XMTableColumn label="终端" width="100" prop="title"></XMTableColumn>
      <!-- <XMTableColumn label="角色" prop="statusTitle"></XMTableColumn> -->
      <XMTableColumn label="加入时间" prop="join_time"></XMTableColumn>
      <XMTableColumn label="离开时间" prop="left_time"></XMTableColumn>
    </pagination-table>
    <!-- <template #footer>
      <span class="dialog-footer">
        <el-button @click="isVisble = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </template> -->
  </el-dialog>
</template>
<script>
  import PaginationTable from '@/components/PaginationTable'
  import { reactive } from '@vue/reactivity'
  import { loadAttList } from '@/api/modules/meeting.js'
  import moment from 'moment'
  export default {
    setup(props, context) {
      const d = reactive({ isVisible: false, id: null, listData: {} })
      // const isVisible = ref(false)
      const init = function (isVisible, meeting_id) {
        d.isVisible = isVisible
        d.id = meeting_id
        load({ meeting_id })
      }
      const load = async function (params) {
        const res = await loadAttList(params)
        const dic = {
          1: 'PC',
          2: 'Mac',
          3: 'Android',
          4: 'iOS',
          5: 'Web',
          6: 'iPad',
          7: 'Android Pad',
          8: '小程序',
        }
        let data = res.data.participants.map((item) => {
          if (item.instanceid) item.title = dic[item.instanceid]
          if (item.join_time)
            item.join_time = moment(item.join_time).format('YYYY-MM-DD HH:mm')
          if (item.left_time)
            item.left_time = moment(item.left_time).format('YYYY-MM-DD HH:mm')
          return item
        })
        d.listData = { data, total: res.data.total_count }
      }
      const onSubmit = function () {
        d.isVisible = false
      }
      const close = function () {
        d.isVisible = false
        context.emit('update:modelValue', false)
      }
      return {
        init,
        d,
        onSubmit,
        close,
      }
    },
    components: { PaginationTable },
  }
</script>
<style lang="scss" scoped></style>
